<template>
  <!--首页头部-->
  <header class="msite_header1">
    <slot name="left_f"></slot>
    <slot name="left"></slot>
    <span class="header_title_M">
      <div class="header_title_text ellipsis">
        <input type="search" placeholder="搜索" v-model="keyword" />
      </div>
      <div
        class="search-content"
        v-show="keyword"
        ref="search"
        style="overflow: auto"
      >
        <!-- 细节1：v-show与keyword绑定，实现删除搜索框全部内容时消失 -->
        <div
          class="search-item"
          v-for="item of List"
          :key="item.id"
          @click="showname"
        >
          {{ item.name }}
        </div>
        <div class="search-item" v-show="hasData">找不到相应结果</div>
      </div>
    </span>
    <slot name="right"></slot>
  </header>
</template>
<script>
export default {
  name: "Search",
  data() {
    return {
      // 搜索框关键词，用v-model与input框进行双向绑定
      keyword: "",
      // 搜索到的相应结果返回列表
      List: [],
      timer: null,
      // 对以下假数据进行搜索，即搜索源
      songs: {
        //假数据格式需注意
        A: [
          {
            id: 56,
            spell: "jinzhongshiyiyuan",
            name: "晋中市中医医院",
          },
          {
            id: 57,
            spell: "akesu",
            name: "阿克苏",
          },
          {
            id: 58,
            spell: "alashanmeng",
            name: "阿拉善盟",
          },
          {
            id: 59,
            spell: "aletai",
            name: "阿勒泰",
          },
          {
            id: 60,
            spell: "ali",
            name: "阿里",
          },
          {
            id: 61,
            spell: "ankang",
            name: "安康",
          },
          {
            id: 62,
            spell: "anqing",
            name: "安庆",
          },
          {
            id: 63,
            spell: "anshan",
            name: "鞍山",
          },
          {
            id: 64,
            spell: "anshun",
            name: "安顺",
          },
          {
            id: 65,
            spell: "anyang",
            name: "安阳",
          },
          {
            id: 338,
            spell: "acheng",
            name: "阿城",
          },
          {
            id: 339,
            spell: "anfu",
            name: "安福",
          },
          {
            id: 340,
            spell: "anji",
            name: "安吉",
          },
          {
            id: 341,
            spell: "anning",
            name: "安宁",
          },
          {
            id: 342,
            spell: "anqiu",
            name: "安丘",
          },
          {
            id: 343,
            spell: "anxi",
            name: "安溪",
          },
          {
            id: 344,
            spell: "anyi",
            name: "安义",
          },
          {
            id: 345,
            spell: "anyuan",
            name: "安远",
          },
        ],
      },
    };
  },

  computed: {
    //判断关键词是否存在搜索源中，如不在，则“找不到相应结果”显示
    // 即通过v-show与hasData绑定来控制“找不到相应结果”的显现
    hasData() {
      return !this.List.length;
    },
  },
  methods: {
    load() {
      this.count += 2;
    },
    showname() {},
  },
  watch: {
    //监听keyword变化
    keyword() {
      // 使用clearTimeout和setTimeout集流函数，提高代码运行效率
      if (this.timer) {
        clearTimeout(this.timer);
      }

      //当删除搜索框内容至空时，搜索结果内容框消失
      if (!this.keyword) {
        this.List = [];
        return;
      }

      this.timer = setTimeout(() => {
        const result = [];
        // js逻辑主体部分，将关键词拼音字母或汉字与搜索源的spell和name分别进行对比
        // 判断关键词是否存在搜索源中
        for (let i in this.songs) {
          this.songs[i].forEach((value) => {
            if (
              value.name.indexOf(this.keyword) > -1 ||
              value.spell.indexOf(this.keyword) > -1
            ) {
              result.push(value);
            }
          });
        }
        this.List = result;
      }, 100);
      //延时100ms执行
    },
  },
};
</script>
<style lang="stylus" rel="stylesheeet/stylus">
.msite_header1 {
  background-color: #fff;
  width: 100%;
  position: absolute;
  top 180px
  z-index 99
  height: 45px;
  border-radius 20px

  .header_search {
    position: absolute;
    left: 25px;
    top: 57%;
    transform: translateY(-50%);
    height: 50%;
    z-index: 99;
     .iconfont .icon-sousuo {
      color: grey;
    }
  }

  .header_title_M {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #fff;
    text-align: center;

    .header_title_text {
      // margin-top: 16px;
      font-size: 25px;
      color: #fff;
      display: block;

      >input {
        width: 100%;
        color: #302b30;
        font-size: 20px;
        border-radius: 15px;
        outline: none;
        padding: 0 25px;


      }
      ::-webkit-input-placeholder { /* Webkit browsers */
          color: #999;
          font-size: 16px;
        }

        :-moz-placeholder { /* Mozilla Firefox 4 to 8 */
          color: #999;
          font-size: 16px;
        }

        ::moz-placeholder { /* Mozilla Firefox 19+ */
          color: #999;
          font-size: 16px;
        }

        :-ms-input-placeholder { /* Internet Explorer 10+ */
          color: #999;
          font-size: 16px;
        }

      input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none;

      }
    }
  }

  .header_register {
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(-100%, -50%);
  }

  .header_register_text {
    color: #fff;
  }

  .header_login {
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);

    .header_login_text {
      color: #fff;
    }
  }
}
.search-content
        z-index 2
        overflow hidden
        position fixed
        width 100%
        height 150px
        top 1.6rem
        left 0
        right 0
        bottom 0
        background-color #eee
        .search-item
            line-height  2rem
            padding-left  1rem
            color #666
            font-size 18px
            background-color #fff
</style>
